<template>
  <div v-loading="isLoading">
    <div class="searchBar">
      <el-form :inline="true">
        <el-form-item>
          <el-select
            v-model="searchForm.statusList"
            placeholder="状态"
            filterable
            multiple
            size="mini"
            style="width: 100px"
          >
            <el-option
              v-for="item in statusOption"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchForm.roleList"
            placeholder="身份"
            filterable
            multiple
            size="mini"
            style="width: 100px"
          >
            <el-option
              v-for="item in roleOption"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入关键字"
            v-model="searchForm.keyword"
            size="mini"
          />
        </el-form-item>

        <el-form-item>
          <el-button size="mini" type="primary" @click="listData()"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- <el-button
        style="margin-top: 1em"
        type="text"
        class="right-button"
        @click="showAdd()"
        >添加数据</el-button
      > -->
    <el-table
      :data="pageData.record"
      stripe
      style="width: 100%"
      border
      :default-sort="{ prop: 'id', order: 'ascending' }"
    >
      <el-table-column prop="id" sortable label="id" width="80" />

      <el-table-column
        prop="nickname"
        label="昵称"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column label="头像" width="100">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="150" />

      <el-table-column label="身份" width="100">
        <template slot-scope="scope">
          {{ roleOption.find((item) => item.value == scope.row.admin).label }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        width="180"
        sortable
        label="创建时间"
      />

      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          {{
            statusOption.find((item) => item.value == scope.row.status).label
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button @click="showDesc(scope.row)" type="text" size="small">
            查看
          </el-button> -->
          <el-button
            type="text"
            style="color: #f56c6c"
            size="small"
            v-if="scope.row.status == 0"
            @click="changeStatus(scope.row)"
            :disabled="isStatus"
          >
            禁用
          </el-button>
          <el-button
            type="text"
            size="small"
            v-else
            @click="changeStatus(scope.row)"
            :disabled="isStatus"
          >
            启用
          </el-button>
          <el-button
            type="text"
            size="small"
            v-if="scope.row.admin == 0"
            @click="changeRole(scope.row)"
            :disabled="isRole"
          >
            晋级管理员
          </el-button>
          <el-button
            type="text"
            size="small"
            v-else
            @click="changeRole(scope.row)"
            :disabled="isRole"
          >
            降级为用户
          </el-button>

          <el-button
            type="text"
            style="color: #f56c6c"
            size="small"
            @click.stop="del(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :page-sizes="[10, 15, 20]"
        :page-size="pageData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  name: "userPage",

  data() {
    return {
      isLoading: false,
      isShowDesc: false,
      searchForm: {
        keyword: "",
        statusList: [],
        roleList: [],
        current: 1,
        size: 10,
      },
      pageData: [],
      statusOption: [
        {
          label: "启用",
          value: 0,
        },
        {
          label: "禁用",
          value: 1,
        },
      ],
      roleOption: [
        {
          label: "管理员",
          value: 1,
        },
        {
          label: "用户",
          value: 0,
        },
      ],
      isStatus: false,
      isRole: false,
    };
  },
  methods: {
    listData() {
      this.isLoading = true;
      this.postRequest("/admin/user/list", this.searchForm).then((res) => {
        if (res.data.status == 200) {
          this.pageData = res.data.data;
        }
        this.isLoading = false;
      });
    },
    del(id) {
      this.deleteRequest(`/admin/article/delete/${id}`).then((res) => {
        if (res.data.status == 200) {
          Message({
            message: "删除成功",
            type: "success",
          });
        }
        this.listData();
      });
    },
    currentChange(current) {
      this.searchForm.current = current;
      this.listData();
    },
    sizeChange(size) {
      this.searchForm.size = size;
      this.listData();
    },
    changeStatus(item) {
      this.isStatus = true;
      this.getRequest(`/admin/user/changeStatus/${item.id}`).then((res) => {
        item.status = res.data.data
        this.isStatus = false;
        this.$message.success('操作成功')
      });
    },
    changeRole(item) {
      this.isRole = true;

      this.getRequest(`/admin/user/changeRole/${item.id}`).then((res) => {
        item.admin = res.data.data
        this.isRole = false;
        this.$message.success('操作成功')
      });
    },
  },
  created() {
    this.listData();
  },
};
</script>
<style>
.searchBar {
  width: 60%;
  float: left;
  margin: 1em 0 0.1em 1em;
}
</style>
